import Image from "next/image";
import LuckyGridPage from "@/pages/lucky/lucky-grid-page";
import LuckyWheelPage from "@/pages/lucky/lucky-wheel-page";
import {StrategyArmory} from "@/app/components/strategyArmory";

export default function Home() {
  return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
        {/*头部文案*/}
          <header className="text-3xl font-bold text-center text-gray-800 my-8">
              <h1 className="text-3xl font-bold mb-2 text-gray-800">大营销平台抽奖</h1>
              <p className="text-gray-500 mb-6">✨ 幸运转盘活动，转出好礼 ✨</p>
          </header>
            <StrategyArmory/>
          {/* 中间的两个div元素 */}
          <div className="flex flex-col md:flex-row gap-4 mb-8">
              <div className="w-full md:w-1/2 p-6 bg-white shadow-lg rounded-lg">
                  <p className="text-gray-700">
                      <LuckyWheelPage/>
                  </p>
              </div>
              <div className="w-full md:w-1/2 p-6 bg-white shadow-lg rounded-lg">
                  <p className="text-gray-700">
                      <LuckyGridPage/>
                  </p>
              </div>
          </div>
          <div className="mt-6 flex gap-4">
              <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                  奖品预览
              </button>
              <button className="bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400">
                  抽奖说明
              </button>
          </div>
          {/* 底部文案 */}
          <footer className="text-gray-600 text-center my-8">
              本项目为 营销抽奖活动前端页面
          </footer>
      </div>
  );
}
